<template>
  <div class="system-info-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <el-icon><Monitor /></el-icon>
          <span style="margin-left: 8px;">系统信息</span>
          <el-button type="primary" @click="loadSystemInfo" :loading="loading" style="margin-left: auto;">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 系统概览 -->
        <el-tab-pane label="系统概览" name="overview">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card class="stat-card">
                <div class="stat-content">
                  <div class="stat-icon" style="background: #1890ff20;">
                    <el-icon :size="32" color="#1890ff"><Monitor /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ systemInfo.system || 'Unknown' }}</div>
                    <div class="stat-label">操作系统</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <div class="stat-content">
                  <div class="stat-icon" style="background: #52c41a20;">
                    <el-icon :size="32" color="#52c41a"><Cpu /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ cpuInfo.cpu_count || 0 }}</div>
                    <div class="stat-label">CPU核心数</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <div class="stat-content">
                  <div class="stat-icon" style="background: #faad1420;">
                    <el-icon :size="32" color="#faad14"><MemoryCard /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ memoryInfo.memory_total || 0 }}GB</div>
                    <div class="stat-label">总内存</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="stat-card">
                <div class="stat-content">
                  <div class="stat-icon" style="background: #722ed120;">
                    <el-icon :size="32" color="#722ed1"><HardDisk /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ diskInfo.disk_total || 0 }}GB</div>
                    <div class="stat-label">磁盘容量</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-card style="margin-top: 20px;">
            <template #header>
              <div class="card-header">
                <el-icon><InfoFilled /></el-icon>
                <span>系统详情</span>
              </div>
            </template>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="主机名">{{ systemInfo.hostname || '-' }}</el-descriptions-item>
              <el-descriptions-item label="架构">{{ systemInfo.architecture || '-' }}</el-descriptions-item>
              <el-descriptions-item label="处理器">{{ systemInfo.processor || '-' }}</el-descriptions-item>
              <el-descriptions-item label="Python版本">{{ systemInfo.python_version || '-' }}</el-descriptions-item>
              <el-descriptions-item label="启动时间">{{ systemInfo.boot_time || '-' }}</el-descriptions-item>
              <el-descriptions-item label="平台">{{ systemInfo.platform || '-' }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-tab-pane>

        <!-- CPU信息 -->
        <el-tab-pane label="CPU信息" name="cpu">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><Cpu /></el-icon>
                    <span>CPU使用率</span>
                  </div>
                </template>
                <div class="cpu-usage">
                  <el-progress 
                    :percentage="cpuInfo.cpu_percent || 0" 
                    :color="getCpuColor(cpuInfo.cpu_percent || 0)"
                    :stroke-width="20"
                  />
                  <div style="text-align: center; margin-top: 10px; font-size: 18px; font-weight: bold;">
                    {{ cpuInfo.cpu_percent || 0 }}%
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><Setting /></el-icon>
                    <span>CPU详情</span>
                  </div>
                </template>
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="物理核心数">{{ cpuInfo.cpu_count || 0 }}</el-descriptions-item>
                  <el-descriptions-item label="逻辑核心数">{{ cpuInfo.cpu_count_logical || 0 }}</el-descriptions-item>
                  <el-descriptions-item label="当前频率">{{ cpuInfo.cpu_freq_current || 0 }} MHz</el-descriptions-item>
                  <el-descriptions-item label="最大频率">{{ cpuInfo.cpu_freq_max || 0 }} MHz</el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-col>
          </el-row>

          <el-card style="margin-top: 20px;" v-if="cpuInfo.cpu_per_core && cpuInfo.cpu_per_core.length > 0">
            <template #header>
              <div class="card-header">
                <el-icon><DataAnalysis /></el-icon>
                <span>各核心使用率</span>
              </div>
            </template>
            <el-row :gutter="10">
              <el-col :span="4" v-for="(usage, index) in cpuInfo.cpu_per_core" :key="index">
                <div class="core-usage">
                  <div class="core-label">核心 {{ index + 1 }}</div>
                  <el-progress 
                    :percentage="usage" 
                    :color="getCpuColor(usage)"
                    :stroke-width="8"
                  />
                  <div class="core-value">{{ usage }}%</div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-tab-pane>

        <!-- 内存信息 -->
        <el-tab-pane label="内存信息" name="memory">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><MemoryCard /></el-icon>
                    <span>内存使用率</span>
                  </div>
                </template>
                <div class="memory-usage">
                  <el-progress 
                    :percentage="memoryInfo.memory_percent || 0" 
                    :color="getMemoryColor(memoryInfo.memory_percent || 0)"
                    :stroke-width="20"
                  />
                  <div style="text-align: center; margin-top: 10px; font-size: 18px; font-weight: bold;">
                    {{ memoryInfo.memory_percent || 0 }}%
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><PieChart /></el-icon>
                    <span>内存详情</span>
                  </div>
                </template>
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="总内存">{{ memoryInfo.memory_total || 0 }} GB</el-descriptions-item>
                  <el-descriptions-item label="已使用">{{ memoryInfo.memory_used || 0 }} GB</el-descriptions-item>
                  <el-descriptions-item label="可用">{{ memoryInfo.memory_available || 0 }} GB</el-descriptions-item>
                  <el-descriptions-item label="使用率">{{ memoryInfo.memory_percent || 0 }}%</el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-col>
          </el-row>

          <el-card style="margin-top: 20px;">
            <template #header>
              <div class="card-header">
                <el-icon><Swap /></el-icon>
                <span>交换空间</span>
              </div>
            </template>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="总交换空间">{{ memoryInfo.swap_total || 0 }} GB</el-descriptions-item>
              <el-descriptions-item label="已使用">{{ memoryInfo.swap_used || 0 }} GB</el-descriptions-item>
              <el-descriptions-item label="使用率">{{ memoryInfo.swap_percent || 0 }}%</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="memoryInfo.swap_percent > 50 ? 'warning' : 'success'">
                  {{ memoryInfo.swap_percent > 50 ? '使用较高' : '正常' }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-tab-pane>

        <!-- 磁盘信息 -->
        <el-tab-pane label="磁盘信息" name="disk">
          <el-card>
            <template #header>
              <div class="card-header">
                <el-icon><HardDisk /></el-icon>
                <span>磁盘使用情况</span>
              </div>
            </template>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="总容量">{{ diskInfo.disk_total || 0 }} GB</el-descriptions-item>
              <el-descriptions-item label="已使用">{{ diskInfo.disk_used || 0 }} GB</el-descriptions-item>
              <el-descriptions-item label="可用空间">{{ diskInfo.disk_free || 0 }} GB</el-descriptions-item>
              <el-descriptions-item label="使用率">
                <el-tag :type="getDiskColor(diskInfo.disk_percent || 0)">
                  {{ diskInfo.disk_percent || 0 }}%
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>

          <el-card style="margin-top: 20px;" v-if="diskInfo.partitions && diskInfo.partitions.length > 0">
            <template #header>
              <div class="card-header">
                <el-icon><FolderOpened /></el-icon>
                <span>分区信息</span>
              </div>
            </template>
            <el-table :data="diskInfo.partitions" stripe>
              <el-table-column prop="device" label="设备" width="120" />
              <el-table-column prop="mountpoint" label="挂载点" width="150" />
              <el-table-column prop="fstype" label="文件系统" width="100" />
              <el-table-column label="总容量" width="100">
                <template #default="{ row }">
                  {{ row.total }} GB
                </template>
              </el-table-column>
              <el-table-column label="已使用" width="100">
                <template #default="{ row }">
                  {{ row.used }} GB
                </template>
              </el-table-column>
              <el-table-column label="可用" width="100">
                <template #default="{ row }">
                  {{ row.free }} GB
                </template>
              </el-table-column>
              <el-table-column label="使用率" width="120">
                <template #default="{ row }">
                  <el-progress 
                    :percentage="row.percent" 
                    :color="getDiskColor(row.percent)"
                    :stroke-width="6"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>

        <!-- 网络信息 -->
        <el-tab-pane label="网络信息" name="network">
          <el-card>
            <template #header>
              <div class="card-header">
                <el-icon><Connection /></el-icon>
                <span>网络统计</span>
              </div>
            </template>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="发送字节">{{ formatBytes(networkInfo.bytes_sent || 0) }}</el-descriptions-item>
              <el-descriptions-item label="接收字节">{{ formatBytes(networkInfo.bytes_recv || 0) }}</el-descriptions-item>
              <el-descriptions-item label="发送包数">{{ networkInfo.packets_sent || 0 }}</el-descriptions-item>
              <el-descriptions-item label="接收包数">{{ networkInfo.packets_recv || 0 }}</el-descriptions-item>
              <el-descriptions-item label="网络连接数">{{ networkInfo.connections || 0 }}</el-descriptions-item>
            </el-descriptions>
          </el-card>

          <el-card style="margin-top: 20px;" v-if="networkInfo.interfaces && networkInfo.interfaces.length > 0">
            <template #header>
              <div class="card-header">
                <el-icon><Monitor /></el-icon>
                <span>网络接口</span>
              </div>
            </template>
            <el-table :data="networkInfo.interfaces" stripe>
              <el-table-column prop="interface" label="接口名称" width="150" />
              <el-table-column prop="ip" label="IP地址" width="150" />
              <el-table-column prop="netmask" label="子网掩码" width="150" />
              <el-table-column prop="broadcast" label="广播地址" />
            </el-table>
          </el-card>
        </el-tab-pane>

        <!-- 进程信息 -->
        <el-tab-pane label="进程信息" name="process">
          <el-card>
            <template #header>
              <div class="card-header">
                <el-icon><List /></el-icon>
                <span>进程统计</span>
              </div>
            </template>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="总进程数">{{ processInfo.total_processes || 0 }}</el-descriptions-item>
            </el-descriptions>
          </el-card>

          <el-card style="margin-top: 20px;" v-if="processInfo.top_processes && processInfo.top_processes.length > 0">
            <template #header>
              <div class="card-header">
                <el-icon><TrendCharts /></el-icon>
                <span>CPU使用率最高的进程</span>
              </div>
            </template>
            <el-table :data="processInfo.top_processes" stripe>
              <el-table-column prop="pid" label="PID" width="80" />
              <el-table-column prop="name" label="进程名" width="200" show-overflow-tooltip />
              <el-table-column label="CPU使用率" width="120">
                <template #default="{ row }">
                  <el-progress 
                    :percentage="row.cpu_percent" 
                    :color="getCpuColor(row.cpu_percent)"
                    :stroke-width="6"
                  />
                </template>
              </el-table-column>
              <el-table-column label="内存使用率" width="120">
                <template #default="{ row }">
                  <el-progress 
                    :percentage="row.memory_percent" 
                    :color="getMemoryColor(row.memory_percent)"
                    :stroke-width="6"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { systemApi } from '@/api'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const activeTab = ref('overview')
const systemInfo = ref({})
const cpuInfo = ref({})
const memoryInfo = ref({})
const diskInfo = ref({})
const networkInfo = ref({})
const processInfo = ref({})

const loadSystemInfo = async () => {
  loading.value = true
  try {
    const data = await systemApi.getSystemInfo()
    systemInfo.value = data.system || {}
    cpuInfo.value = data.cpu || {}
    memoryInfo.value = data.memory || {}
    diskInfo.value = data.disk || {}
    networkInfo.value = data.network || {}
    processInfo.value = data.process || {}
  } catch (error) {
    ElMessage.error('加载系统信息失败')
  } finally {
    loading.value = false
  }
}

const handleTabClick = (tab) => {
  // 可以在这里添加特定标签页的数据加载逻辑
}

const getCpuColor = (percentage) => {
  if (percentage < 50) return '#67c23a'
  if (percentage < 80) return '#e6a23c'
  return '#f56c6c'
}

const getMemoryColor = (percentage) => {
  if (percentage < 60) return '#67c23a'
  if (percentage < 85) return '#e6a23c'
  return '#f56c6c'
}

const getDiskColor = (percentage) => {
  if (percentage < 70) return '#67c23a'
  if (percentage < 90) return '#e6a23c'
  return '#f56c6c'
}

const formatBytes = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

onMounted(() => {
  loadSystemInfo()
})
</script>

<style scoped>
.system-info-page {
  max-width: 1400px;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.cpu-usage, .memory-usage {
  padding: 20px;
}

.core-usage {
  text-align: center;
  margin-bottom: 15px;
}

.core-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.core-value {
  font-size: 12px;
  color: #333;
  margin-top: 5px;
}
</style>
